<template>
    <div class="feedback-container">
      <!-- 头部导航栏 -->
      <div class="header">
        <button class="back-button" @click="goBack">
          <i class="arrow-left">←</i>
        </button>
        <h2 class="green-title">意见反馈</h2>
      </div>
      <!-- 反馈表单 -->
      <form class="feedback-form">
        <div class="form-group">
          <label for="feedback" class="green-label">我们非常重视您的意见，请告诉我们：</label>
          <textarea
            id="feedback"
            placeholder="请输入您的反馈...（例如：建议改进的功能、遇到的问题、使用体验等）"
            rows="5"
            class="feedback-textarea"
          ></textarea>
        </div>
        <div class="form-group submit-container">
          <button type="submit" class="submit-button">提交反馈</button>
        </div>
      </form>
      
      <!-- 常见意见反馈示例 -->
      <div class="feedback-examples">
        <p>示例意见：</p>
        <ul>
          <li>建议改进的功能：增加夜间模式</li>
          <li>遇到的问题：加载速度太慢</li>
          <li>使用体验：界面设计不够友好</li>
          <li>内容建议：希望增加更多教程</li>
        </ul>
      </div>
  
      <!-- 页面底部文字 -->
      <div class="green-message">
        <p>您的满意是我们最大的动力，感谢您的宝贵意见！</p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "Feedback",
    methods: {
      goBack() {
        // 返回上一页的逻辑，根据具体应用场景可以修改
        this.$router.go(-1);
      }
    }
  };
  </script>
  
  <style scoped>
  .feedback-container {
    padding: 20px;
    background-color: #e8f5e9;
    font-family: Arial, sans-serif;
    min-height: 100vh; /* 确保容器占满整个页面 */
    position: relative; /* 为 positioning 定位做准备 */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .header {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
  }
  
  .back-button {
    background-color: transparent;
    border: none;
    color: #556b2f;
    font-size: 20px;
    cursor: pointer;
    margin-right: 10px;
  }
  
  .green-title {
    color: #4caf50;
    margin: 0;
    flex-grow: 1;
    text-align: center;
    margin-right: 50px; /* 增加这一行来微调标题的位置 */
  }
  
  .green-label {
    color: #4caf50;
    display: block;
    margin-bottom: 10px;
  }
  
  .feedback-form {
    background-color: #e8f5e9; /* 修改表单背景颜色为绿色 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 80%; /* 限制表单宽度，使其在页面中居中 */
    text-align: left; /* 表单内容左对齐 */
  }
  
  .form-group {
    margin-bottom: 20px;
    width: 100%; /* 确保每个表单组占满表单宽度 */
  }
  
  .submit-container {
    text-align: center; /* 将提交按钮居中 */
  }
  
  .feedback-textarea {
    width: 90%;
    padding: 10px;
    border: 1px solid #4caf50;
    border-radius: 4px;
    resize: vertical;
    font-size: 16px;
  }
  
  .submit-button {
    background-color: #4caf50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .submit-button:hover {
    background-color: #43a047;
  }
  
  .feedback-examples {
    margin-top: 20px;
    text-align: left; /* 让例子左对齐 */
    color: #4caf50;
    width: 80%; /* 控制示例文本的宽度 */
  }
  
  .feedback-examples ul {
    list-style-type: none; /* 去掉默认列表样式 */
    padding: 0; /* 去掉内边距 */
  }
  
  .feedback-examples li {
    margin: 5px 0; /* 添加每个示例之间的间隔 */
  }
  
  .green-message {
    position: absolute; /* 固定在页面底部 */
    bottom: 20px;
    left: 20px;
    right: 20px;
    text-align: center;
    color: #4caf50;
    background-color: #e8f5e9; /* 确保背景颜色一致 */
    padding: 5px 0; /* 添加一些内边距 */
  }
  </style>
  